<template>
	<view class="zy_form_container">
		<slot></slot>
	</view>
</template>
<script>
	import props from "./props.js";
	import validateField from "./validateField.js"
	export default {
		props: {
			labelPosition: {
				type: String,
				default: 'left'
			},
			//表单域标签的的宽度
			labelWidth: {
				type: String | Number,
				default: 50
			},
			rules: {
				type: Object | Array,
			},
			model: {
				type: Object,
				default: {}
			},
			//表单域标签的字体大小，默认大小36rpx
			labelSize: {
				type: Number,
				default: 36
			},
			//表单域标签的的字体加粗，默认不加粗
			labelWeight: {
				type: String,
				default: ''
			},
			//表单域标签的的字体颜色
			labelColor: {
				type: String,
				default: ''
			},
			//表单的下边框是否显示
			border: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				error: '', //校验错误提示
				originalModel: '',
				arr: []
			}
		},
		// 监听父组件传值
		watch: {
			model: {
				immediate: true,
				handler(n) {
					if (!this.originalModel) {
						this.originalModel = this.deepClone(n)
					}
				}
			},
		},
		computed: {
			propsChange() {
				return {
					labelPosition: this.labelPosition,
					rules: this.rules,
					model: this.model,
					labelWidth: this.labelWidth,
					labelSize: this.labelSize,
					labelWeight: this.labelWeight,
					labelColor: this.labelColor,
					border: this.border,
					error: this.error,
				}
			},
		},
		methods: {
			//深度克隆
			deepClone(obj) {
				// 对常见的“非”值，直接返回原来值
				if ([null, undefined, NaN, false].includes(obj)) return obj;
				if (typeof obj !== 'object' && typeof obj !== 'function') {
					//原始类型直接返回
					return obj;
				}
				var o = this.isArray(obj) ? [] : {};
				for (let i in obj) {
					if (obj.hasOwnProperty(i)) {
						o[i] = typeof obj[i] === 'object' ? this.deepClone(obj[i]) : obj[i];
					}
				}
				return o;
			},
			// 判断arr是否为一个数组，返回一个bool值
			isArray(arr) {
				return Object.prototype.toString.call(arr) === '[object Array]';
			},
			// 清空所有表单组件的内容
			resetFields() {
				this.model = this.originalModel
				console.log(this.model)
			},
			//表单校验
			validate() {
				return new Promise((resolve, reject) => {
					this.$nextTick(() => {
						// 	this.error=[]
						// 		this.rules.forEach((m,n) => {
						// 			if(m.required){
						// 				Object.keys(this.model).forEach((item, key) => {
						// 					if(m.name===item&&!this.model[item]){
						// 						let obj={
						// 								name:item,
						// 								message:m.message
						// 							}
						// 							this.error.push(obj)
						// 					reject(false)
						// 					return
						// 					}else{
						// 							resolve(true)
						// 					}
						// 				})
						// 				return
						// 			}else{
						// 				resolve(true)
						// 			}
						// 	})
						// })
						var checkRes = validateField.check(this.model, this.rules);
						if (checkRes) {
							resolve(true)
						} else {
							this.error = validateField.error
							reject(false)
						}
					})
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.zy_form_container {
		width: 100%;
		height: 100%;
	}
</style>